<div class="builder-page">
  <mat-accordion multi>
    <mat-expansion-panel [expanded]="true">
      <mat-expansion-panel-header>
        <mat-panel-title>{{ name }}</mat-panel-title>
      </mat-expansion-panel-header>
      <mat-list>
        @if (loading) {
          <div class="mx-auto my-10">
            <app-loading />
          </div>
        }
        @if (pages$ | async; as pages) {
          <div class="cards grid grid-cols-12 gap-1">
            @for (item of pages; track item; let i = $index) {
              <div
                class="item col-span-6 sm:col-span-4"
                [matTooltip]="item.title"
                (click)="loadPage(item)"
              >
                <div class="inner flex flex-col justify-center items-center overflow-hidden">
                  <div class="font-mono">{{ i + 1 }}</div>
                  <div class="title">{{ item.title }}</div>
                </div>
              </div>
            }
          </div>
        }
      </mat-list>
    </mat-expansion-panel>
  </mat-accordion>
</div>
